<template>
  <view class="container">
    <view class="status-bar">培优屋·关注孩子的心灵成长</view>
    <view class="content">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        circular="true"
      >
        <swiper-item>
          <image
            class="swiper-item"
            src="../../static/banner/banner-1.png"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="swiper-item"
            src="../../static/banner/banner-2.png"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="swiper-item"
            src="../../static/banner/banner-3.png"
          />
        </swiper-item>
      </swiper>

      <!-- 公告栏 -->
      <view class='tui-notice-board'>
        <view class="tui-icon-bg">
          <tui-icon
            name="news-fill"
            :size='24'
            color='#f54f46'
          ></tui-icon>
        </view>
        <view
          class="tui-scorll-view"
          @tap='detail'
        >
          <view
            class="tui-notice"
            :class="[animation?'tui-animation':'']"
          >
            已预约{{tipsInfo.doingNumber}}名儿童，已解决{{tipsInfo.doneNumber}}名儿童的成长问题
          </view>
        </view>
      </view>

      <!-- 选项卡 -->
      <tui-tabs
        :tabs="navbar"
        :currentTab="currentTab>1?0:currentTab"
        @change="change"
        itemWidth="50%"
        sliderBgColor="#006c67"
        selectedColor="#006c67"
      ></tui-tabs>

      <mescroll-uni
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        :up="upOption"
        @up="upCallback"
        top="640rpx"
      >
        <view class="mescroll-flex">
          <view
            @tap="goDetail(item.id)"
            class="mescroll-item"
            v-for="(item, i) in dataList"
            :key="i"
          >
            <image
              mode="aspectFit"
              :src="item.teacherPicture"
            />
            <view class="info">
              <view>{{item.teacherName}}</view>
              <view>年龄：{{item.teacherAge}}</view>
            </view>
          </view>
        </view>

      </mescroll-uni>

    </view>
  </view>
</template>

<script>
import tuiIcon from "@/components/icon/icon";
import tuiTabs from "@/components/tui-tabs/tui-tabs";
// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin],
  components: { tuiIcon, tuiTabs },
  data() {
    return {
      currentTab: 0,
      navbar: [
        {
          name: "心理名师"
        },
        {
          name: "学霸帮学"
        }
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 4000,
      duration: 500,
      teacherType: 1,
      // 下拉刷新的常用配置
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
        auto: true // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: "暂无相关数据"
        },
        // 回到顶部按钮配置
        toTop: {
          offset: 300
        }
      },
      dataList: [],
      tipsInfo: {},
      animation: false
    };
  },
  onLoad() {
    setTimeout(() => {
      this.animation = true;
    }, 600);
    this.getWebTeacherCount();
  },
  methods: {
    /*下拉刷新的回调*/
    downCallback() {
      // 第2种: 下拉刷新和上拉加载调同样的接口, 那么不用第1种方式, 直接mescroll.resetUpScroll()即可
      this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
    },
    /*上拉加载的回调*/
    async upCallback(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      let { data: res } = await this.$api.web_teachers({
        current: pageNum,
        size: pageSize,
        teacherType: this.teacherType
      });
      console.log(res);

      // 接口返回的当前页数据列表 (数组)
      let curPageData = res.data.records;
      // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
      let curPageLen = curPageData.length;
      // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
      let totalSize = res.data.total;

      //设置列表数据
      if (this.mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
      this.dataList = this.dataList.concat(curPageData); //追加新数据

      this.mescroll.endBySize(curPageLen, totalSize);
    },
    // 选项卡事件
    change(e) {
      this.currentTab = e.index;
      console.log(this.currentTab);
      this.currentTab ? (this.teacherType = 2) : (this.teacherType = 1);
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    // 获取公告信息
    async getWebTeacherCount() {
      let { data: res } = await this.$api.web_teacher_count();
      console.log(res);
      this.tipsInfo = res.data;
    },
    // 进入详情页
    goDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  //   background-color: blue;
  .swiper {
    width: 710rpx;
    height: 400rpx;
    margin: 20rpx auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17), 0 0 6px rgba(206, 128, 128, 0.09);
    .swiper-item {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
      overflow: hidden;
      background-image: linear-gradient(90deg, #006c67, #0abcb0);
    }
  }
  .mescroll-flex {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 15rpx;
    .mescroll-item {
      display: flex;
      width: 340rpx;
      height: 200rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 20rpx 10rpx 0 10rpx;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17), 0 0 6px rgba(0, 0, 0, 0.09);
      image {
        width: 160rpx;
        height: 160rpx;
      }
      .info {
        margin-left: 20rpx;
        font-size: 18rpx;
      }
    }
  }
}
</style>
